import { _decorator, Component, Node, Mask, v3, UITransform, Vec3, Size } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GuidelineComponent')
export class GuidelineComponent extends Component {

    @property(Mask)
    mask: Mask = null;

    @property(Node)
    background: Node = null;

    @property(Node)
    finger: Node = null;

    start() {
        this.hide();
    }

    public show(target: Node) {
        const targetPos: Vec3 = v3();
        target.getWorldPosition(targetPos);
        this.mask.node.setWorldPosition(targetPos);
        
        const maskTransform: UITransform = this.mask.node.getComponent(UITransform);
        maskTransform.setContentSize(target.getComponent(UITransform).contentSize);
        this.mask.node.active = true;
        
        this.background.setPosition(maskTransform.convertToNodeSpaceAR(this.node.worldPosition));

        this.finger.setWorldPosition(v3(targetPos.x, targetPos.y - this.finger.getComponent(UITransform).height * 0.6, 0));
        this.finger.active = true;
    }

    public hide() {
        this.mask.node.active = false;
        this.finger.active = false;
    }
}
